<template>
  <div class="content">
    <el-card class="box-card card_left">
      <div></div>
      <span>
        <!-- 结构与病害 -->
        <el-select v-model="bridgeType" placeholder="选择桥梁类型" @change="getTree">
          <el-option label="公路桥梁养护规范" value="1"></el-option>
          <el-option label="城市桥梁养护规范" value="0"></el-option>
        </el-select>
      </span>
      <el-button type='mini' @click="addBridge(1)" style="margin-bottom:20px">新增桥型</el-button>
      <el-tree :data="treedata" :props="defaultProps"  @node-click="handleNodeClick"
      :render-content="renderContent" accordion node-key="id" ref='tree'
      show-checkbox @check-change="handleCheckChange" :check-on-click-node="true" :check-strictly="true"
      :default-checked-keys="checkedKeys" :default-expanded-keys="expandedKeys"
      ></el-tree>
      
    </el-card>
    <el-card class="box-card card_right">
      <div v-if='formType==1 ' class="card1">


        <el-row :gutter="10">
          <!-- <el-col :span="6">
            <el-input v-model="name" placeholder="请输入..." size="small"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="small"  @click="getSech('病害')">查询</el-button>
          </el-col> -->
          <el-col :span="12">
            <el-button type="primary" icon="el-icon-plus" size="small" @click="showForm('病害')" v-if="isAdd">新增</el-button>
          </el-col>
        </el-row>
        <!-- 表格 病害表格-->
        <el-table :data="tableData" :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
           stripe max-height="500" size="small"   v-if='formType==1' ref="table1">
          <el-table-column prop="name" label="病害名称" min-width="80" show-overflow-toolti></el-table-column>
          <el-table-column prop="description" label="病害定义" min-width="120" show-overflow-toolti></el-table-column>
          <el-table-column prop="model" label="备注" min-width="120" show-overflow-toolti></el-table-column>
          <el-table-column prop="address" label="操作" width="240">
            <template slot-scope="scope" v-if='formType==1'>
              <el-button @click="toDetail(scope.row)" size='mini' type="primary" plain>病害评定</el-button>
              <el-button @click="upDateB(scope.row,'病害')" size='mini' type="primary" plain>修改</el-button>
              <el-button size='mini' type="danger" plain @click="handleDelete('病害',scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-count="pageNum"
          @current-change="changeCurrent1"
        ></el-pagination>
        </div>
      </div>
        <div v-else class="card2">
            <div>
              <!-- <el-col :span="4">
                <el-input v-model="name" placeholder="请输入..." size="small"></el-input>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" size="small" @click="getSech('评定标准')">查询</el-button>
              </el-col> -->
              <!-- <span>病害评定标准</span> -->
              <el-button size="small" type="primary" icon="el-icon-plus" style="margin-bottom: 10px; float: right;" @click="showForm('评定标准')">新增</el-button> 
              <el-button size="small" style="margin-bottom: 10px; float: right;margin-right: 20px;" @click="back">返回</el-button> 
            </div>
            <!-- 表格2 病害评定标准表格 -->
            <el-table :data="tableData2" :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
              stripe max-height="500" size="small"   v-if='formType==0' ref="table2">
              <el-table-column prop="name" label="病害标准名称" min-width="80" show-overflow-toolti></el-table-column>
              <el-table-column prop="code" label="病害标准编码" min-width="80" show-overflow-toolti></el-table-column>
              <el-table-column prop="qualityDesc" label="损害说明" min-width="80" show-overflow-toolti></el-table-column>
              <el-table-column prop="quantityDesc" label="损害等级" min-width="80" show-overflow-toolti></el-table-column>
              <el-table-column prop="deductedValue" label="扣分值" min-width="80" show-overflow-toolti></el-table-column>
              <el-table-column prop="remark" label="备注" min-width="210"></el-table-column>
              <el-table-column prop="address" label="操作" width="160"> 
                <template slot-scope="scope">
                  <el-button @click="upDateB(scope.row,'评定标准')" size='mini' type="primary" plain>修改</el-button>
                  <el-button size='mini' type="danger" plain @click="handleDelete('评定标准',scope.row)">删除</el-button>

                </template>
              </el-table-column>
            </el-table>
          <div class="page">
            <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-count="pageNum"
          @current-change="changeCurrent2"
        ></el-pagination>
          </div>



      </div>

    </el-card>
    <!-- 新增桥型 -->
    <vx-popup :title="title" width="680px" @close="closeFormSubmitData" :active.sync="cardDialogVisible"
      @confirmPopup="submit" @cancelPopup="cancelFormSubmitData">
      <el-form ref="form" :model="addForm" label-width="100px">
        <el-form-item label="名称：">
          <el-input v-model="addForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="Code：">
          <el-input v-model="addForm.code" placeholder="请输入Code"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注：">
          <el-input v-model="addForm.mark" placeholder="请输入备注"></el-input>
        </el-form-item> -->
      </el-form>
    </vx-popup>
    <!-- 结构病害 -->
    <vx-popup title="病害评定标准" width="680px" @close="closeFormSubmitData" :active.sync="formVisible"
      @confirmPopup="submit" @cancelPopup="cancelFormSubmitData">
      <el-form ref="form" :model="addForm" label-width="100px">
        <el-form-item label="名称：">
          <el-input v-model="addForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="Code：">
          <el-input v-model="addForm.code" placeholder="请输入Code"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注：">
          <el-input v-model="addForm.mark" placeholder="请输入备注"></el-input>
        </el-form-item> -->
      </el-form>
    </vx-popup>

    <!-- 新增,修改病害 -->
    <vx-popup :title="title2" width="700px" @close="closeForm('病害')" :active.sync="formVisible2"
      @confirmPopup="submitForm2('病害')" @cancelPopup="closeForm('病害')">
      <el-form ref="form2" :model="diseaseForm2" label-width="120px" class="form2">
      <el-form-item label="病害名称：">
        <el-input v-model="diseaseForm2.name" placeholder="请输入病害名称"></el-input>
      </el-form-item>
      <el-form-item label="病害单位：">
        <el-input v-model="diseaseForm2.diseaseUnits" placeholder="请输入病害单位"></el-input>
      </el-form-item>
      <el-form-item label="病害定义：">
        <el-input v-model="diseaseForm2.description" placeholder="请输入病害定义"></el-input>
      </el-form-item>
      <el-form-item label="Code：">
        <el-input v-model="diseaseForm2.code" placeholder="请输入Code"></el-input>
      </el-form-item>
    </el-form>
    </vx-popup>

    <!-- 新增，修改病害评定标准 -->
    <vx-popup :title="title1" width="700px" @close="closeForm('评定标准')" :active.sync="formVisible1"
      @confirmPopup="submitForm2('评定标准')" @cancelPopup="closeForm('评定标准')">
      <el-form ref="form" :model="diseaseForm " label-width="120px" class="form2">
        <el-form-item label="病害标准名称：">
          <el-input v-model="diseaseForm.name" placeholder="请输入病害标准名称"></el-input>
        </el-form-item>
        <el-form-item label="评定标准编码：">
          <el-input v-model="diseaseForm.code" placeholder="请输入评定标准编码"></el-input>
        </el-form-item>
        <el-form-item label="技术状况等级：">
          <el-input v-model="diseaseForm.level" placeholder="请输入技术状况等级"></el-input>
        </el-form-item>
        <el-form-item label="损害说明：">
          <el-input v-model="diseaseForm.qualityDesc" placeholder="请输入损害说明"></el-input>
        </el-form-item>
        <el-form-item label="损害等级：">
          <el-input v-model="diseaseForm.quantityDesc" placeholder="请输入损害等级"></el-input>
        </el-form-item>
        <!-- <el-form-item label="损坏等级：">
          <el-input v-model="diseaseForm.damage_level" placeholder="请输入..."></el-input>
        </el-form-item> -->
        <el-form-item label="扣分值：">
          <el-input v-model="diseaseForm.deductedValue" placeholder="请输入扣分值"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="diseaseForm.remark" placeholder="请输入备注 500字内"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注：">
          <el-input v-model="addForm.mark" placeholder="请输入备注"></el-input>
        </el-form-item> -->
      </el-form>
    </vx-popup>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        checkedKeys: [],
        expandedKeys: [],
        total:0,
        pageSize:10,
        pageNum:1,
        node:'',
        title: '新增桥型',
        title1: '新增病害评定标准',
        title2: '新增病害',
        formVisible:false,
        formVisible1:false,
        formVisible2:false,
        diseaseForm:{
          id:'',
          diseaseId:'',
          ownId:'',
          name:'',
          code:'',
          level:'',
          qualityDesc:"",
          quantityDesc:'',
          // damage_level:'',
          deductedValue:'',
          // step_code:'',
          // step_name:"",
          remark:'',
          // description:"",
        },
        diseaseForm2:{
          name:'',
          diseaseUnits:'',
          structureId:'',
          description:'',
          ownId:"",
          id:'',
          code:'',
        },
        addForm: {
          name: '',
          code: '',
          mark: '',
          standardId: '',
          pId:'',
          ownId:'',
          id:''
        },
        isAdd:false,
        structureId:'',
        ownId:'',
        diseaseId:'',
        formType:'1',
        bridgeType: '1',
        total: 0,
        treedata: [],
        name: "",
        cardDialogVisible: false,
        addtitle: "新增测点",
        defaultProps: {
          children: "children",
          label: "name",
        },
        //   表格数据
        tableData: [],
        tableData2:[]
        //   验证规则
      };
    },

    created() {
      this.getTree()
    },
    methods: {
      handleCheckChange(data, checked, child) {
        if (checked === true) {
          this.checkedKeys = [data.id];
          this.$refs['tree'].setCheckedKeys([data.id]);
          this.nodeClick(data)
        }
      },
      getSech(title){
        if(title=='病害'){
          // this.sendDelApi('delOneDisease',row.id,'getList1')
        }
        if(title=='评定标准'){
          // this.sendDelApi('delDisease',row.id,'getList2')
        }
      },
      handleDelete(title, row) {
        if(title=='病害'){
          this.sendDelApi('delOneDisease',row.id,'getList1')
        }
        if(title=='评定标准'){
          this.sendDelApi('delDisease',row.id,'getList2')
        }
      },
      // 返回
      gotback() {
        this.displaynone = true;
      },
      upDateB(row,title){
        console.log(title)
        if(title=='评定标准'){
          this.title1 = '修改病害评定标准'
          this.formVisible1 = true
          for(let i in row){
            if(i != 'createTime' && i!= 'updateTime')
              this.diseaseForm[i] = row[i]
          }
          console.log(row)
        }
        if(title=='病害'){
          console.log(row)
          this.title2 = '修改病害'
          this.formVisible2 = true
          // this.diseaseForm2 = row
          for(let i in row){
            if(i != 'createTime' && i!= 'updateTime')
              this.diseaseForm2[i] = row[i]
          }
        }
      },
     
      submitForm2(title){
        if(title == "评定标准" && this.title1 == '新增病害评定标准'){
          this.sendApi2(this.diseaseForm,'addDisease','getList2','formVisible1')
        }
        if(title == "评定标准" && this.title1 == '修改病害评定标准'){
          this.sendApi2(this.diseaseForm,'upDisease','getList2','formVisible1')
        }
        if(title=='病害' &&  this.title2 == '新增病害'){
          if(!this.diseaseForm2.diseaseUnits){
            this.$message({
              type: "error",
              message: "请输入病害单位",
            });
            return ;
          }
          this.sendApi2(this.diseaseForm2,'addOneDisease','getList1','formVisible2')
        }
        if(title=='病害' &&  this.title2 == '修改病害'){
          this.sendApi2(this.diseaseForm2,'upOneDisease','getList1','formVisible2')
        }
      },
      showForm(title){
        this.cleanForm()
        if(title == '评定标准'){
          this.formVisible1 = true
          this.diseaseForm.diseaseId = this.diseaseId
          this.diseaseForm.ownId = this.ownId
          this.title1 = '新增病害评定标准'
        }
        if(title == '病害'){
          this.formVisible2 = true
          this.diseaseForm2.ownId = this.ownId
          this.diseaseForm2.structureId = this.structureId
          this.title2 = '新增病害'
        }
      },
      closeForm(title){
        if(title == "病害"){
          this.formVisible2 = false
        }
        if(title == "评定标准"){
          this.formVisible1 = false
        }
      },
      back(){
        this.formType = 1
        this.tableData2 = []
      },
      changeCurrent2(val) {
        this.pageNum = val
        this.getList2()
      },
      getList2(){
        // console.log('就这')
        this.$api.knowledge.queryAllDisease({diseaseId:this.diseaseId, pageSize: this.pageSize,pageNum: this.pageNum}).then(res=>{
          if(res.data.success){
            this.tableData2 = res.data.data.currentPageData
            this.total = res.data.data.instanceList.length
          }
        })
      },
      toDetail(row){
        // console.log(row)
        this.formType = 0
        this.diseaseForm.diseaseId = row.id
        this.diseaseId = row.id
        this.getList2()
      },
      renderContent(h, { node, data, store }) {
        // console.log(data)
        if(data.type=='construction_substructure_model' ||data.type=="construction_superstructure_model" ||data.type=="construction_bridge_floor_model" ){
          return (
            <span class="custom-tree-node">
              <span>{data.name}</span>
              <span style="margin-left:15px">
                <el-button
              class="el-icon-plus"
              style="color: #327bdc !important;"
              type="text"
              size="mini"
              on-click={ () => this.addBridge(2,data) } >
            </el-button>
              
            </span>
          </span>
              )
        }
        else
        return (
          <span class="custom-tree-node">
            <span>{data.name}</span>
            <span style="margin-left:15px">
              <el-button
                  class="el-icon-edit"
                  style="color: #bec4d0 !important;"
                  type="text"
                  size="mini"
                  on-click={ (e) => {
                e.stopPropagation()
                this.upDateBridge(data)} }>
                </el-button>
           
                <el-button
                  class="el-icon-delete"
                  style="color: red !important;"
                  type="text"
                  size="mini"
                  on-click={ (e) => {
                e.stopPropagation()
                this.deleteBridge(data)} }>
                </el-button>
            </span>
          </span>);
      },
      addBridge(data,type) {
        console.log(type)
        this.addForm.pId = ''
        this.addForm.ownId = ''
        if (data == 1) {
          this.title = '新建桥型'
        }
        if(data==2){
          this.title = '新建结构部件'
          this.addForm.pId = type.id
          this.addForm.ownId = type.ownId
        }
        this.addForm.standardId = this.bridgeType
        this.cardDialogVisible = true
      },
      upDateBridge(data){
        this.addForm.name=data.name
        this.addForm.code=data.code
        this.addForm.standardId = this.bridgeType
        this.addForm.id = data.id
        if(data.type=="bridge_type_model"){
          this.title = '修改桥型'
        }
        else{
          this.title = '修改结构部件'
          this.addForm.pId = data.pId
          this.addForm.ownId = data.ownId
        }
        this.cardDialogVisible = true
      },
      
      deleteBridge(data){
        console.log(data,'www')
        if(data.type =="bridge_construction_information"){
          this.sendDelApi('delStructure',data.id,'getTree')
        }
        if(data.type =="bridge_type_model"){
          this.sendDelApi('delTreeType',data.id,'getTree')
        }
        
      },
      //获取结构树
      getTree() {
        this.treedata = []
        this.$api.knowledge.getTree({
          standardId: this.bridgeType
        }).then(res => {
          if (res.data.success)
            this.treedata = res.data.data
        })
      },
      changeCurrent1(val) {
        this.pageNum = val
        this.getList1()
      },
      //获取病害列表
      getList1(){
        this.$api.knowledge.queryDisease({structureId:this.structureId,pageSize: this.pageSize,pageNum: this.pageNum}).then(res=>{
            if(res.data.success){
              this.tableData= res.data.data[0] 
              this.total = res.data.data[0].length
              // console.log(this.tableData)
            }
          })
      },
      nodeClick(data){
        this.pageNum = 1
        this.tableData = []
        this.formType = 1
        // console.log(data);
        this.node = data
        if(data.type!="bridge_type_model" && data.type!="construction_superstructure_model"
        && data.type!="construction_substructure_model" && data.type!="construction_bridge_floor_model"
        ){
          this.isAdd = true
          this.ownId = data.ownId
          this.structureId = data.id
          this.getList1()
        }else{
          this.isAdd = false
          this.tableData=[]
        }
      },
      //   树节点被点击时的回调
      handleNodeClick(data, Node, s) {
        // this.$refs['tree'].setCheckedKeys([]);
        this.checkedKeys = [data.id];
        this.$refs['tree'].setCheckedKeys([data.id]);
        this.nodeClick(data)
      },
      // 关闭弹框
      closeFormSubmitData() {
        this.cardDialogVisible = false;
        this.cleanForm()
      },
      // 取消弹框
      cancelFormSubmitData() {
        this.cardDialogVisible = false;
        this.cleanForm()
      },
      // 提交弹框
      submit() {
        if (!this.addForm.name) {
          this.$message({
            type: "danger",
            message: "请输入名称",
          });
          return false
        }
        if(this.title == "新建桥型"){
          this.sendApi('addTreeType','添加')
        }
        if(this.title == "新建结构部件"){
        this.sendApi('addStructure','添加')
        }
        if(this.title == "修改桥型"){
        this.sendApi('upDateTreeType','修改')
        }
        if(this.title == "修改结构部件"){
        this.sendApi('dupDateStructure','修改')
        }
      },
      // 表格详情跳转
      particulars() {
        this.displaynone = false;
      },
      // 表格行编辑
      handleEdit(row) {
        console.log(row);
        this.cardDialogVisible = true;
        this.addtitle = "修改测点";
        this.addRuleForm = row;
      },
      
      sendApi(fn,msg){
        this.$api.knowledge[fn](this.addForm).then(res => {
          if (res.data.success) {
            this.getTree()
            this.$message({
              type: "success",
              message: `${msg}成功`,
            });
            this.cardDialogVisible = false;
            this.cleanForm()
          }
        })
      },
     //新增函数
      sendApi2(params,apiName,listFn,visName){
        if(!params.name){
            this.$message({
              type: "danger",
              message: "请输入名称",
              });
            return false
        }
        this.$api.knowledge[apiName](params).then(res=>{
            console.log(res.data)
            if(res.data.success){
              this.$message({
              type: "success",
              message: "新增成功",
              });
            this[listFn]()
            this[visName] = false
            }
          })
      },
      //清空表单
      cleanForm(){
        this.addForm={
          name: '',
          code: '',
          mark: '',
          standardId: '',
          pId:'',
          ownId:'',
          id:''
        }
        this.diseaseForm={
          diseaseId:'',
          name:'',
          code:'',
          level:'',
          qualityDesc:"",
          quantityDesc:'',
          damage_level:'',
          deductedValue:'',
          step_code:'',
          step_name:"",
          remark:'',
          description:"",
        }
        this.diseaseForm2={
          name:'',
          structureId:'',
          ownId:"",
          id:'',
          code:'',
        }
      },
       // 删除函数
      sendDelApi(apiFn,id,listFn){
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$api.knowledge[apiFn]({id}).then(res=>{
              if(res.data.success){
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this[listFn]()
              }
            })
            callback()
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      
    },
  };

</script>

<style lang="scss" scoped>
  .form2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .card_left {
    span {
      .mRight6 {
        margin-right: 6px;
      }

      display: block;
      font-size: 16px;
      font-weight: 500;
      color: #327bdc;
      line-height: 30px;
      margin-bottom: 18px;
    }
  }

  .card_right {
    .el-row {
      margin-bottom: 20px;

      .el-col-12:nth-child(2) {
        text-align: right;
      }

      .el-col-12:nth-child(3) {
        text-align: right;
      }
    }
    /deep/.el-card__body{
      height: 95%;
      position: relative;
    }
    .page {
      margin-top: 20px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
    }

    .box_two {
      .titletop {
        font-size: 16px;
        color: #327bdc;
        font-weight: 500;
        display: block;
        height: 32px;
        line-height: 32px;
      }

      .tab-wrapper {
        /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
          padding-left: 20px;
        }

        /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(7) {
          padding-right: 20px;
        }

        /deep/.el-tabs__nav-wrap::after {
          // background-color: none;
          z-index: -1;
        }

        /deep/.el-tabs__item.is-active {
          color: #fff;
          background: rgba(var(--vs-primary), 1) !important;
        }

        /deep/.el-tabs__item {
          height: 30px;
          line-height: 30px;
          margin-right: 20px;
          border-radius: 20px;
          background: #f2f2f2;
        }

        /deep/.el-tabs__item.is-active {
          color: #fff;
        }

        /deep/.el-tabs__active-bar {
          background: none;
        }
      }
    }
  }

  /deep/.el-select {
    width: 160px;
  }

  /* /deep/.el-input__inner {
    height: 30px;
    width: 160px;
  } */

  /deep/.el-input__icon {
    line-height: 30px;
  }

</style>
